import React from 'react'
import { 
	Table
} from 'antd'
import styles from './merchant-definition.less'

class DataMerchantDefinition extends React.Component{
	render(){
		const rowSelection = {
			onChange: (selectedRowKeys, selectedRows) => {
		    	console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
		  	},
		  	getCheckboxProps: record => ({
		    	disabled: record.name === 'Disabled User', // Column configuration not to be checked
		    	name: record.name,
		  	}),
		};
		let columns = [{
				title: '编号',
				dataIndex: 'id'
			},{
				title:"商圈名称",
				dataIndex:"merchantName"
			},{
				title:"商圈类型",
				dataIndex:"geoType"
			},{
				title:"商圈面积",
				dataIndex:"area"
			},{
				title:"商圈等级",
				dataIndex:"level"
			},{
				title:"创建人",
				dataIndex:"inputBy"
			},{
				title:"创建时间",
				dataIndex:"inputDate"
			}		   
		];
		let data=[];
		if(this.props.da.data){
			data=this.props.da.data.rows.map((item)=>{
				return {
					key:item.id,
					id:item.id,
					merchantName:item.merchantName,
					geoType:item.geoType,
					area:item.area,
					level:item.level,
					inputBy:item.inputBy,
					inputDate:item.inputDate
				}
			});
		}
		return (
			<Table
				rowSelection={rowSelection} 
				columns={columns} 
				dataSource={data} 
				bordered={true}
				className={styles.datagrid}
				size="small"
				pagination={{
					total:this.props.da.data && this.props.da.data.total ? this.props.da.data.total : 0,
					pageSize:8,
					onChange:(page,pageSize)=>{
						this.props.onLoadData(page);
					}
				}} 
			/>
		)
	}
}

export default DataMerchantDefinition;

/**
 *	1> 如何在ant design中使用样式覆盖，与vue less scope
 */